<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">课程学分分析</b>
              </div>
            </el-col>
          </el-row>
          <div
            style="margin: 50px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <el-form style="margin: 10px 30px;" :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm"
                     class="demo-form-inline">
              <el-form-item label="班级名称" prop="classroomName">
                <el-select v-model="ruleForm.classroomName" clearable placeholder="请选择班级">
                  <el-option
                    v-for="item in classroomNames"
                    :key="item.classroomName"
                    :label="item.classroomName"
                    :value="item.classroomName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitFoundationAreaMap('ruleForm')">绘制面积图</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitGradientStackingAreaMap('ruleForm')">绘制渐变堆叠面积图</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div
            v-loading="loading"
            :element-loading-text="text"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            style="margin: 20px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <div v-show="foundation" id="foundation-area-map"></div>
            <div v-show="gradient" id="gradient-stacking-area-map"></div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/teacherSide/left'
import Top from '@/components/teacherSide/top'
import * as echarts from 'echarts'

export default {
  name: 'teacherCourseCreditAnalysis',
  data () {
    return {
      text: '',
      loading: true,
      foundation: false,
      gradient: false,
      classroomNames: [],
      teacherId: '',
      ruleForm: {
        teacherName: '',
        classroomName: ''
      },
      courseName: [],
      courseCredit: [],
      rules: {
        classroomName: [
          {required: true, message: '请选择班级', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.text = '请选择班级加载图表'
    this.loading = true
    this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
  },
  beforeMount () {
    this.getTeacher()
  },
  mounted () {
    this.getAllClassroomNames()
  },
  methods: {
    // 获取教师id
    getTeacher () {
      this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
      this.ruleForm.teacherName = JSON.parse(localStorage.getItem('teacher')).teacherName
    },
    // 获取当前老师名下的所有班级名称
    getAllClassroomNames () {
      this.$axios.post('http://localhost:8888/getAllClassroomByTeacherId/' + this.teacherId).then(res => {
        this.classroomNames = res.data.data
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 提交表单，获取后端数据
    onSubmitFoundationAreaMap (formName) {
      this.$refs[formName].validate((valid) => {
        // 上传表单信息
        if (valid) {
          this.$axios.post('http://localhost:8888/teacherCourseCreditAnalysis/' + this.teacherId, this.ruleForm).then(res => {
            if (res.data.flag) {
              if (res.data.data.courseName.length > 0 && res.data.data.courseCredit.length > 0) {
                this.$message({
                  message: '恭喜你，课程信息获取成功，开始绘图......',
                  type: 'success'
                })
                this.courseName = res.data.data.courseName
                this.courseCredit = res.data.data.courseCredit
                this.foundation = true
                this.gradient = false
                this.loading = false
                // 绘制课程学分分析的基础面积图
                this.foundationAreaMap()
              } else {
                this.text = this.ruleForm.classroomName + '暂无课程信息，请重新选择'
                this.$message({
                  message: '警告哦，您选择的班级暂无课程信息，请重新选择',
                  type: 'warning'
                })
              }
            } else {
              this.$message.error('错了哦，课程信息获取失败')
            }
          }).catch(err => {
            return Promise.reject(err)
          })
        } else {
          return false
        }
      })
    },
    onSubmitGradientStackingAreaMap (formName) {
      this.$refs[formName].validate((valid) => {
        // 上传表单信息
        if (valid) {
          this.$axios.post('http://localhost:8888/teacherCourseCreditAnalysis/' + this.teacherId, this.ruleForm).then(res => {
            if (res.data.flag) {
              if (res.data.data.courseName.length > 0 && res.data.data.courseCredit.length > 0) {
                this.$message({
                  message: '恭喜你，课程信息获取成功，开始绘图......',
                  type: 'success'
                })
                this.courseName = res.data.data.courseName
                this.courseCredit = res.data.data.courseCredit
                this.foundation = false
                this.loading = false
                this.gradient = true
                // 绘制课程学分分析的基础面积图
                this.gradientStackingAreaMap()
              } else {
                this.$message({
                  message: '警告哦，您选择的班级暂无课程信息，请重新选择',
                  type: 'warning'
                })
              }
            } else {
              this.$message.error('错了哦，课程信息获取失败')
            }
          }).catch(err => {
            return Promise.reject(err)
          })
        } else {
          return false
        }
      })
    },
    // 绘制基础面积图
    foundationAreaMap () {
      var chartDom = document.getElementById('foundation-area-map')
      var myChart = echarts.init(chartDom)
      var option
      myChart.resize({
        width: 1115,
        height: 400
      })
      option = {
        title: {
          text: '课程学分分析分布折线图',
          left: 'center',
          top: 'top'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.courseName
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '课程学分',
            data: this.courseCredit,
            type: 'line',
            areaStyle: {}
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
      let currentIndex = -1

      setInterval(function () {
        var dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        currentIndex = (currentIndex + 1) % dataLen
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }, 3000)
      option && myChart.setOption(option)
    },
    // 绘制渐变堆叠面积图
    gradientStackingAreaMap () {
      var chartDom = document.getElementById('gradient-stacking-area-map')
      var myChart = echarts.init(chartDom)
      var option
      myChart.resize({
        width: 1115,
        height: 400
      })
      option = {
        color: ['#00DDFF', '##80FFA5', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
          text: '课程学分分析分布折线图',
          left: 'center',
          top: 'top'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#096'
            }
          }
        },
        legend: {
          data: this.courseName
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.courseName
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '学分',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.courseCredit
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
      let currentIndex = -1

      setInterval(function () {
        var dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        currentIndex = (currentIndex + 1) % dataLen
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }, 3000)
      option && myChart.setOption(option)
    }
  },
  components: {
    Left,
    Top
  }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #cadcf5;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #42b983;
  }
</style>
<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }

  a {
    text-decoration: none;
    color: cadetblue;
  }
</style>
<style>
  .student-age {
    width: 90%;
    height: 500px;
  }
</style>
